<template>
	<view class="prod-items" @tap="toProdPage">
		<view class="hot-imagecont">
			<image :src="item.pic" class="hotsaleimg"></image>
		</view>
		<view class="hot-text">
			<view class="hotprod-text">{{item.prodName}}</view>
			<view class="prod-info" v-if="sts==6">{{item.prodCommNumber}}{{i18n.evaluation}} {{item.positiveRating}}%{{i18n.praise}}</view>
			<view class="prod-text-info" :class="{'collection-row':showCancelCollect}">
				<view class="price">
					<text v-if="sts==2" class="deadline-price">{{i18n.timeLimitedPrice}}</text>
					<text class="symbol">￥</text>
					<text class="big-num">{{wxs.parsePrice(item.price)[0]}}</text>
					<text class="small-num">.{{wxs.parsePrice(item.price)[1]}}</text>
				</view>
				<view class="collection-btn price small-num" v-if="showCancelCollect" @tap.stop="handleCancelCollection">
					{{i18n.cancleCollection}} </view>
			</view>
		</view>
	</view>
</template>

<script module="wxs" lang="wxs" src="../../wxs/number.wxs"></script>

<script>
	var http = require("../../utils/http.js");

	export default {
		data() {
			return {};
		},

		components: {},
		props: {
			item: Object,
			sts: String,
			showCancelCollect: Boolean,
		},
		
		computed:{
			i18n() {
				return this.$t('index')
			}
		},

		methods: {
			toProdPage() {
				this.$Router.push({ path: '/packageProduct/pages/prod/prod', query: { prodid: this.item.prodId }})
			},
			handleCancelCollection() {
				uni.showLoading();
				var params = {
					url: "/p/user/collection/addOrCancel",
					method: "POST",
					data: this.item.prodId,
					callBack: (res) => {
						uni.showToast({
							title: res ? this.i18n.collectionAdded : this.i18n.collectionCancelled,
							duration: 1200,
							icon: 'none',
						})
						this.$emit('getCollectionProd')
						uni.hideLoading()					}
				};
				http.request(params);
			}
		}
	};
</script>
<style>
	@import "./production.css";
</style>
